<script setup>
    import { reactive, ref, watchEffect } from 'vue';
    import request, { host } from '@/utils/request'
    
    // const total = reactive({
    //     total: 0
    // })
    
    const goodslist = ref([])
    const getData = async function () {
        const { data } = await request.get('/goods/soup')
        goodslist.value = data.data;
        // total = data.data.total;
        console.log(data.data)
    }
    watchEffect(getData)
    
    
</script>
<template> 
    <van-card  v-for="item in goodslist" :key="item.id" :price="item.price"  :title="item.goodsname" :thumb="item.imgurl" size="70"/>


    <!-- <img src={{item.imgurl}}>
    <p>{{ item.goodsname }}</p>
    <span>{{ item.price }}</span> -->
</template>
<style scoped>
.cardlist {
    border-bottom: 1px solid #ccc;
    height: 90px;
}

.van-image__error{
    width: 70px;
    height: 70px;
    padding: 10px 0;
}
.van-card-thumb-size {
    /* float: left; */
    width: 70px;
    height: 70px;
    padding: 10px 0;
}

.cardlist span {
    color: red;
}


</style>
    